<template>
  <div class="content">
    <div class="total_boxs">
      <div class="total_box total4">
        <div class="item">
          <img src="@/assets/zhy.png" />
          <div class="text">
            <div class="length">{{ users.nums_all }}</div>
            <div class="title">总会员</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/jrzc.png" />
          <div class="text">
            <div class="length">{{ users.nums_today_reg }}</div>
            <div class="title">今日注册</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/jrdl.png" />
          <div class="text">
            <div class="length">{{ users.nums_today_login }}</div>
            <div class="title">今日登陆</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/yhy.png" />
          <div class="text">
            <div class="length">{{ users.nums_month_login }}</div>
            <div class="title">月活跃</div>
          </div>
        </div>
      </div>
      <div class="total_box">
        <div class="item">
          <img src="@/assets/c3.png" />
          <div class="text">
            <div class="length">{{ baoguo.nums_pic_not }}</div>
            <div class="title">拍照返图_未拍照</div>
          </div>
        </div>
        <!-- <div class="item">
          <img src="@/assets/c3.png" />
          <div class="text">
            <div class="length">{{ baoguo.nums_pic_hasbeen }}</div>
            <div class="title">拍照返图_已拍照</div>
          </div>
        </div> -->
        <div class="item">
          <img src="@/assets/c3.png" />
          <div class="text">
            <div class="length">{{ baoguo.nums_pic_all }}</div>
            <div class="title">拍照返图_全部</div>
          </div>
        </div>
      </div>
    </div>
    <div class="total_boxs">
      <div class="total_box">
        <div class="item">
          <img src="@/assets/c1.png" />
          <div class="text">
            <div class="length" v-if="select1 == '日'">{{ zyorder.nums_day_HY }}</div>
            <div class="length" v-else-if="select1 == '月'">{{ zyorder.nums_month_HY }}</div>
            <div class="length" v-else>{{ zyorder.nums_year_HY }}</div>
            <div class="title">海运</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/c2.png" />
          <div class="text">
            <div class="length" v-if="select1 == '日'">{{ zyorder.nums_day_KY }}</div>
            <div class="length" v-else-if="select1 == '月'">{{ zyorder.nums_month_KY }}</div>
            <div class="length" v-else>{{ zyorder.nums_year_KY }}</div>
            <div class="title">空运</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/c3.png" />
          <div class="text">
            <div class="length" v-if="select1 == '日'">{{ zyorder.nums_day_EMS }}</div>
            <div class="length" v-else-if="select1 == '月'">{{ zyorder.nums_month_EMS }}</div>
            <div class="length" v-else>{{ zyorder.nums_year_EMS }}</div>
            <div class="title">EMS</div>
          </div>
        </div>
        <div style="width: 60px;">
          <el-select size="mini" v-model="select1" placeholder="请选择">
            <el-option label="年" value="年"></el-option>
            <el-option label="月" value="月"></el-option>
            <el-option label="日" value="日"></el-option>
          </el-select>
        </div>
      </div>
      <div class="total_box">
        <div class="item">
          <img src="@/assets/c1.png" />
          <div class="text">
            <div class="length" v-if="select2 == '日'">{{ baoguo.nums_day_yubao }}</div>
            <div class="length" v-else-if="select2 == '月'">{{ baoguo.nums_month_yubao }}</div>
            <div class="length" v-else>{{ baoguo.nums_year_yubao }}</div>
            <div class="title">预报</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/c2.png" />
          <div class="text">
            <div class="length" v-if="select2 == '日'">{{ baoguo.nums_day_ruku }}</div>
            <div class="length" v-else-if="select2 == '月'">{{ baoguo.nums_month_ruku }}</div>
            <div class="length" v-else>{{ baoguo.nums_year_ruku }}</div>
            <div class="title">入库</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/c3.png" />
          <div class="text">
            <div class="length"  >{{ baoguo.nums_allin }}</div>
   
            <div class="title">在库总数</div>
          </div>
        </div>
        <div style="width: 60px;">
          <el-select size="mini" v-model="select2" placeholder="请选择">
            <el-option label="年" value="年"></el-option>
            <el-option label="月" value="月"></el-option>
            <el-option label="日" value="日"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="total_box">
      <div class="item">
        <img src="@/assets/c1.png" />
        <div class="text">
          <div class="length">
            <span @click="eject_tier('nums_daidabao_putong')">{{ DynamicData.nums_daidabao_putong }}</span>
          </div>
          <div class="title">待打包包裹(普通)</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/c1.png" />
        <div class="text">
          <div class="length">
            <span @click="eject_tier('nums_daidabao_jiaji')">{{ DynamicData.nums_daidabao_jiaji }}</span>
          </div>
          <div class="title">待打包包裹(加急)</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/c1.png" />
        <div class="text">
          <div class="length">
            <span @click="eject_tier('nums_baoguoqingdian')">{{ DynamicData.nums_baoguoqingdian }}</span>
          </div>
          <div class="title">包裹清点待处理</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/c1.png" />
        <div class="text">
          <div class="length">
            <span @click="eject_tier('nums_fuwuqingqiu')">{{ DynamicData.nums_fuwuqingqiu }}</span>
          </div>
          <div class="title">服务请求待处理</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/c1.png" />
        <div class="text">
          <div class="length">
            <span @click="eject_tier('nums_baoguofenxiang')">{{ DynamicData.nums_baoguofenxiang }}</span>
          </div>
          <div class="title">包裹分箱待处理</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/c1.png" />
        <div class="text">
          <div class="length">
            <span @click="eject_tier('nums_wuming')">{{ DynamicData.nums_wuming }}</span>
          </div>
          <div class="title">无名件数量</div>
        </div>
      </div>
    </div>

    <!-- <div class="echarts_box">
      <div class="echarts_item half"><div id="getalltbdata4"></div></div>
      <div class="echarts_item half"><div id="getalltbdata5"></div></div>
    </div> -->
    <div class="echarts_box">
      <div class="echarts_item"><div id="getalltbdata1"></div></div>
      <div class="echarts_item"><div id="getalltbdata2"></div></div>
      <div class="echarts_item"><div id="getalltbdata3"></div></div>
    </div>
    <el-dialog :title="template_name" :visible.sync="show_template" width="80%"><component v-bind:is="template" v-if="show_template" :type="type"></component></el-dialog>
  </div>
</template>

<script>
import { getalltbdata, getalldata } from '@/api/test.js';
import * as echarts from 'echarts';
import daidabao from '@/components/template/daidabao.vue';
import wuming from '@/components/template/wuming.vue';
import qingdian from '@/components/template/qingdian.vue';
import fuwu from '@/components/template/fuwu.vue';
import fenxiang from '@/components/template/fenxiang.vue';
export default {
  data() {
    return {
      show_template: false,
      template: null,
      template_name: '',
      type: '',
      zyorder: {},
      users: {},
      baoguo: {},
      DynamicData: {},
      select1: '日',
      select2: '日'
    };
  },
  methods: {
    eject_tier(template_name) {
      /* 弹出层
        @ nums_daidabao_putong 待打包包裹(普通)
        @ nums_daidabao_jiaji 待打包包裹(加急)
        @ nums_baoguoqingdian 包裹清点待处理
        @ nums_fuwuqingqiu 服务请求待处理
        @ nums_baoguofenxiang 包裹分箱待处理
        @ nums_wuming 无名件数量
      */
      if (template_name == 'nums_daidabao_putong') {
        this.template = daidabao;
        this.type = '普通';
        this.template_name = '待打包包裹(普通)';
      } else if (template_name == 'nums_daidabao_jiaji') {
        this.template = daidabao;
        this.type = '加急';
        this.template_name = '待待打包包裹(加急)';
      } else if (template_name == 'nums_wuming') {
        this.template = wuming;
        this.template_name = '无名件数量';
      } else if (template_name == 'nums_baoguoqingdian') {
        this.template = qingdian;
        this.template_name = '包裹清点待处理';
      } else if (template_name == 'nums_fuwuqingqiu') {
        this.template = fuwu;
        this.template_name = '服务请求待处理';
      } else if (template_name == 'nums_baoguofenxiang') {
        this.template = fenxiang;
        this.template_name = '包裹分箱待处理';
      }

      this.show_template = true;
    },
    async getList() {
      await getalldata().then(res => {
        console.log(res);
        this.zyorder = res.zyorder;
        this.users = res.users;
        this.baoguo = res.baoguo;
        this.DynamicData = res.DynamicData;
      });
      await getalltbdata().then(res => {
        // console.log(res);
        setTimeout(() => {
          let chartDom = document.getElementById('getalltbdata1');
          let myChart = echarts.init(chartDom);
          let option;
          let dat = res.month_baoguofenxiang.map(item => item.dat);
          let coun = res.month_baoguofenxiang.map(item => item.coun);
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            title: {
              left: 'center',
              text: '(月)包裹分箱'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '0',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: dat,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            // color: ['#54a0ff'],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '包裹分箱',
                type: 'bar',
                barWidth: '35px',
                data: coun,
                label: {
                  show: true,
                  position: 'inside',
                  color: '#fff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(23, 192, 235,.8)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(75, 123, 236,.7)'
                    }
                  ])
                }
              }
            ]
          };
          option && myChart.setOption(option);
        }, 0);
        setTimeout(() => {
          let chartDom = document.getElementById('getalltbdata2');
          let myChart = echarts.init(chartDom);
          let option;
          let dat = res.month_baoguoqingdian.map(item => item.dat);
          let coun = res.month_baoguoqingdian.map(item => item.coun);
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            title: {
              left: 'center',
              text: '(月)包裹清点'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '0',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: dat,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            // color: ['#6c5ce7'],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '包裹清点',
                type: 'bar',
                barWidth: '35px',
                data: coun,
                label: {
                  show: true,
                  position: 'inside',
                  color: '#fff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(197, 108, 240,1.0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(125, 95, 255,.7)'
                    }
                  ])
                }
              }
            ]
          };
          option && myChart.setOption(option);
        }, 0);
        setTimeout(() => {
          let chartDom = document.getElementById('getalltbdata3');
          let myChart = echarts.init(chartDom);
          let option;
          let dat = res.month_fantu.map(item => item.dat);
          let coun = res.month_fantu.map(item => item.coun);
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            title: {
              left: 'center',
              text: '(月)包裹反退'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '0',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: dat,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            // color: ['#00cec9'],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '包裹反退',
                type: 'bar',
                barWidth: '35px',
                data: coun,
                label: {
                  show: true,
                  position: 'inside',
                  color: '#fff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(0, 184, 148,.7)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(29, 209, 161,.8)'
                    }
                  ])
                }
              }
            ]
          };
          option && myChart.setOption(option);
        }, 0);
        /* setTimeout(() => {
          let chartDom = document.getElementById('getalltbdata4');
          let myChart = echarts.init(chartDom);
          let option;
          let dat = res.month_jiagubaozhuang.map(item => item.dat);
          let coun = res.month_jiagubaozhuang.map(item => item.coun);
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: dat
            },
            title: {
              left: 'center',
              text: '(月)加固包装'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '0',
              top: '12%',
              containLabel: true
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: coun,
                type: 'line',
                name: '加固包装',
                itemStyle: {
                  color: 'rgba(9, 132, 227,1)'
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(0, 206, 201,.6)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(9, 132, 227,.9)'
                    }
                  ])
                }
              }
            ]
          };

          option && myChart.setOption(option);
        }, 0);
        setTimeout(() => {
          let chartDom = document.getElementById('getalltbdata5');
          let myChart = echarts.init(chartDom);
          let option;
          let dat = res.month_regist.map(item => item.dat);
          let coun = res.month_regist.map(item => item.coun);
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: dat
            },
            title: {
              left: 'center',
              text: '(月)注册用户'
            },
            grid: {
              left: '3%',
              right: '3%',
              top: '12%',
              bottom: '0',
              containLabel: true
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: coun,
                type: 'line',
                name: '注册用户',
                itemStyle: {
                  color: 'rgba(32, 191, 107,1.0)'
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(38, 222, 129,.5)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(32, 191, 107,.9)'
                    }
                  ])
                }
              }
            ]
          };

          option && myChart.setOption(option);
        }, 0);
      */
      });
    }
  },
  mounted() {
    setTimeout(() => {
      this.getList();
    }, 500);
  }
};
</script>

<style scoped lang="scss">
.content {
  background-color: #f8f8f8;
  height: calc(100vh - 50px);
  overflow: auto;
  padding: 0 10px 10px;
  .user_box {
    padding: 15px 0;
    display: flex;
    justify-content: space-around;
    background-color: #ffffff;
    .item {
      display: flex;
      img {
        width: 50px;
        height: 50px;
        margin: auto 0;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20px;
        .title {
          font-size: 20px;
        }
        .length {
          font-size: 38px;
        }
      }
    }
  }
  .total_boxs {
    display: flex;
    justify-content: space-between;
    .total_box {
      width: calc(50% - 5px);
      margin: 20px 0 0 0;
      &.total4 {
        .item {
          width: calc(100% / 4);
        }
      }
      .item {
        width: calc(100% / 3 - 40px);
      }
    }
  }
  .total_box {
    padding: 20px 0 20px;
    display: flex;
    margin: 20px 0;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: #ffffff;

    .item {
      display: flex;
      width: calc(100% / 6);
      img {
        width: 50px;
        height: 50px;
        margin: auto 10px auto auto;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto auto auto 0;
        .title {
          font-size: 18px;
        }
        .length {
          font-size: 25px;
          span {
            text-decoration: underline;
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }
  }
  .echarts_box {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    .echarts_item {
      &.half {
        width: calc(50% - 5px);
      }
      width: calc(33.33% - 17px);

      #getalltbdata1,
      #getalltbdata2,
      #getalltbdata3 {
        height: 250px;
        padding: 10px 0;
        background-color: #fff;
      }
      #getalltbdata4,
      #getalltbdata5 {
        height: 350px;
        padding: 10px 0;
        background-color: #fff;
      }
    }
  }
}
</style>
